<template>
	<view>
		<uni-popup ref="popup" type="center" background-color="#fff" borderRadius="16rpx">
			<view class="popup-box">
				<view class="popup-header">
					<view class="popup-title" v-if="title">
						{{title}}
					</view>
				</view>
				<view class="con-text">
					<slot>{{ content }}</slot>
				</view>
				<view class="btn">
					<button @click="cancel" v-if="showCancel">{{cancelText}}</button>
					<button @click="confirm">{{confirmText}}</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		name:"service-modal",
		props: {
			title: {
				type: String,
				default: ""
			},
			content: {
				type: String,
				default: ""
			},
			cancelText: {
				type: String,
				default: "取消"
			},
			confirmText: {
				type: String,
				default: "确定"
			},
			showCancel: {
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				
			};
		},
		methods: {
			open() {
				this.$refs.popup.open()
				this.$emit("open")
			},
			close() {
				this.$refs.popup.close()
				this.$emit("close")
			},
			confirm() {
				this.close()
				this.$emit("confirm")
			},
			cancel() {
				this.close()
				this.$emit("cancel")
			}
		}
	}
</script>

<style lang="scss" scoped>
.popup-box {
	width: 640rpx;
	// height: 388rpx;
	background: #FFFFFF;
	border-radius: 16rpx 16rpx 16rpx 16rpx;
	box-sizing: border-box;
	
	.popup-title {
		text-align: center;
		font-weight: bold;
		font-size: 36rpx;
		color: #000000;
		padding-top: 32rpx;
	}
	
	.con-text {
		// min-height: 200rpx;
	}
	
	.btn{
		display: flex;
		align-items: center;
		justify-content: center;
		border-top: 1rpx solid rgba(0, 0, 0, 0.10);
		button{
			width: 50%;
			height: 112rpx;
			border-radius: 41rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 34rpx;
			color: #999999;
			line-height: 112rpx;
			text-align: center;
			font-style: normal;
			text-transform: none;
			background-color: #FFFFFF;
			border-radius: 0 0 0 16rpx;
			&::after{
				border: none;
			}
			&:last-child{
				font-weight: bold;
				font-size: 34rpx;
				color: #E72A2A;
				// background: linear-gradient( 127deg, #FFA233 0%, #FB4C4C 100%);
				border-radius: 0 0 16rpx 0;
				// margin-left: 20rpx;
				border-left: 1rpx solid rgba(0, 0, 0, 0.10);
			}
		}
	}
}
</style>